<template>
    <view>
        <view>
            <navbar title="考试中"></navbar>
        </view>
        <u-button @click="show=true">答题卡</u-button>
        <view>
            <u-popup v-model="show" mode="top">
                <view class="answer-sheet">
                    <view :class="item.active?'answer-sheet-item-active':'answer-sheet-item'"
                        v-for="item in getAnswerSheets" @click="curIndex=item.no-1;show=false">{{item.no}}</view>
                </view>
            </u-popup>
        </view>
        <view>
            <view>
                <template v-if="curQuestion">
                    <view>
                        <question
                            :initAnswer="answerSheets.answers.find(d=>d.questionId===curQuestion.questionId)==null?[]:answerSheets.answers.find(d=>d.questionId===curQuestion.questionId).answer"
                            :point="curQuestion.point" :no="curQuestion.no" :type="curQuestion.type"
                            :question="curQuestion.questionContent" :options="curQuestion.options"
                            @answerChange="(answer)=>answerChange(curQuestion.type,curQuestion.questionId,answer)">
                        </question>
                    </view>
                    <view class="operation">
                        <template v-if="curIndex>0">
                            <u-button @click="curIndex--" class="operation-btn">上一题</u-button>
                        </template>
                        <template v-if="curIndex<exam.testPaper.testPaperDetails.length-1">
                            <u-button @click="curIndex++" class="operation-btn">下一题</u-button>
                        </template>
                        <template v-else>
                            <u-button class="operation-btn" @click="submitTestPaper">交卷</u-button>
                        </template>
                    </view>
                </template>
                <template v-else>
                    <u-empty></u-empty>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        message,
        request
    } from '../../api'
    export default {
        data() {
            return {
                show: false,
                // 考试信息
                exam: {
                    testPaper: {
                        testPaperDetails: []
                    }
                },
                curIndex: 0,
                // 答题卡
                answerSheets: {
                    answers: []
                }
            }
        },
        watch: {
            "answerSheets.answers": function() {
                uni.setStorageSync("answerSheets" + this.$route.query.id, JSON.stringify(this.answerSheets));
            },
            "curIndex": function() {
                uni.setStorageSync("curIndex" + this.$route.query.id, this.curIndex)
            }
        },
        methods: {
            submitTestPaper: async function() {
                if (this.answerSheets.answers.length < this.exam.testPaper.testPaperDetails.length) {
                    this.show = true;
                    message.error("您还有未作答的题目");
                    return;
                }

                // 交卷
                const res = await request.post("/exam/submit", {
                    eid: this.$route.query.id,
                    uid: uni.getStorageSync("uid"),
                    answers: this.answerSheets.answers
                });
                if (res.code >= 0) {
                    message.success(res.message);
                } else {
                    message.error(res.message);
                }
                uni.removeStorageSync("answerSheets" + this.$route.query.id);
                uni.removeStorageSync("curIndex" + this.$route.query.id);

            },
            answerChange: function(type, questionId, answer) {
                var i = this.answerSheets.answers.findIndex(d => d.questionId == questionId);
                if (i >= 0) {
                    this.answerSheets.answers.splice(i, 1);
                }
                this.answerSheets.answers.push({
                    type,
                    questionId,
                    answer
                });
            }
        },
        computed: {
            curQuestion() {
                return this.exam.testPaper.testPaperDetails[this.curIndex];
            },
            getAnswerSheets() {
                return this.exam.testPaper.testPaperDetails.map(d => {
                    if (this.answerSheets.answers.find(e => e.questionId === d.questionId)) {
                        return {
                            no: d.no,
                            active: true
                        }
                    } else {
                        return {
                            no: d.no,
                            active: false
                        }
                    }
                })
            }
        },
        async mounted() {
            const res = await request.get("/exam/exam", {
                id: this.$route.query.id
            });
            if (res.code >= 0) {
                this.exam = res.data;
            } else {
                uni.navigateTo({
                    url: "/pages/exam/begin?id=" + this.$route.query.id + "&error=" + res.message
                })
            }
            // 读取缓存
            if (uni.getStorageSync("answerSheets" + this.$route.query.id)) {
                var answerSheets = JSON.parse(uni.getStorageSync("answerSheets" + this.$route.query.id));
                this.answerSheets = answerSheets;
            }
            if (uni.getStorageSync("curIndex" + this.$route.query.id)) {
                var curIndex = parseInt(uni.getStorageSync("curIndex" + this.$route.query.id));
                this.curIndex = curIndex;
            }
        }
    }
</script>

<style>
    .answer-sheet {
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
    }

    .answer-sheet-item {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 1.8rem;
        line-height: 1.8rem;
        margin: 0.2rem;
        display: flex;
        justify-content: center;
        background-color: antiquewhite;
        color: black;
    }

    .answer-sheet-item-active {
        width: 1.8rem;
        height: 1.8rem;
        border-radius: 1.8rem;
        line-height: 1.8rem;
        margin: 0.2rem;
        display: flex;
        justify-content: center;
        background-color: springgreen;
        color: white;
    }

    .operation {
        margin: 1rem;
    }

    .operation-btn {
        margin: 0.5rem 0;
    }
</style>